<!--
 * @Author: 龙雨欢 932838577@qq.com
 * @Date: 2023-10-06 11:59:39
 * @LastEditors: 龙雨欢 932838577@qq.com
 * @LastEditTime: 2023-11-29 18:18:33
 * @FilePath: \sxyd-vue\src\components\nenghao\enterprises.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="selectDiv">
      <el-select v-model="value" placeholder="请选择师市" class="shishiselect" @change="changeshi" clearable>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value2" placeholder="请选择行业大类" class="shishiselect" @change="changeshi" clearable>
        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value3" placeholder="请选择行业类别" class="shishiselect" @change="changeshi" clearable>
        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="selectDiv2">
      <el-button type="primary" @click="feishuitongji" plain style="margin-right: 10px;">废水治理统计</el-button>
      <el-popover placement="right" width="520" trigger="click">
        <el-checkbox-group v-model="checkList" @change="changeCol">
          <el-checkbox v-for="(item, key) in datacolums" :label="item.label"></el-checkbox>
        </el-checkbox-group>
        <el-button slot="reference" type="primary" plain>筛选内容</el-button>
      </el-popover>
    </div>
    <h3 style="text-align: center;">师市工业企业废水治理与排放情况-二污普</h3>
    <el-table :data="tableData" stripe style="width: 100%" ref="table" show-summary>
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="ss" label="师" width="100">
      </el-table-column>
      <el-table-column prop="xzqhmc" label="行政区划名称" width="150">
      </el-table-column>
      <!-- <el-table-column prop="hydm" label="行业代码" width="120">
      </el-table-column> -->
      <el-table-column prop="hydlmc" label="行业大类名称" width="220">
      </el-table-column>
      <el-table-column prop="hylbmc" label="行业类别名称" width="180">
      </el-table-column>
      <el-table-column prop="hylbmc2" label="行业类别名称2" width="180">
      </el-table-column>
      <el-table-column prop="qyyxzt" label="企业运行状态" width="120">
      </el-table-column>
      <template v-for="item  in datacolums">
        <el-table-column v-if="showColumn(item.prop)" :prop="item.prop" :label="item.label" :width="item.width">
        </el-table-column>
      </template>
    </el-table>
    <el-dialog @open="open()" title="查询结果废水治理合计统计" :visible.sync="dialogTableVisible" width="35%">
      <div id="feishui" style="width: 600px;height: 300px;">

      </div>
    </el-dialog>
  </div>
</template>

<script>
let myChart;
import echarts from "echarts";
export default {
  name: 'erwupu',
  data() {
    return {
      options: [{
        value: '第一师',
        label: '第一师'
      }, {
        value: '第二师',
        label: '第二师'
      }, {
        value: '第三师',
        label: '第三师'
      }, {
        value: '第四师',
        label: '第四师'
      }, {
        value: '第五师',
        label: '第五师'
      }, {
        value: '第六师',
        label: '第六师'
      }, {
        value: '第七师',
        label: '第七师'
      }, {
        value: '第八师',
        label: '第八师'
      }, {
        value: '第九师',
        label: '第九师'
      }, {
        value: '第十师',
        label: '第十师'
      }, {
        value: '第十一师',
        label: '第十一师'
      }, {
        value: '第十二师',
        label: '第十二师'
      }, {
        value: '第十三师',
        label: '第十三师'
      }, {
        value: '第十四师',
        label: '第十四师'
      }],
      options2: [],
      options3: [],
      value: '',
      value2: '',
      value3: '',
      tableData: [],
      checkList: [],
      datacolums: [{
        prop: 'qsl', label: '取水量(万立方米)', width: 180, isShow: true
      }, {
        prop: 'cszls', label: '其中：城市自来水(万立方米)', width: 220, isShow: true
      }, {
        prop: 'zbs', label: '其中：自备水(万立方米)', width: 220, isShow: true
      }, {
        prop: 'slgcs', label: '其中：水利工程供水(万立方米)', width: 220, isShow: true
      }, {
        prop: 'qtgyqygs', label: '其中：其他工业企业供水(万立方米)', width: 250, isShow: true
      }, {
        prop: 'fszlsss', label: '废水治理设施数(套)', width: 220, isShow: true
      }, {
        prop: 'sjclnl', label: '设计处理能力(万立方米/日)', width: 220, isShow: true
      }, {
        prop: 'nsjclsl', label: '年实际处理水量(万立方米)', width: 220, isShow: true
      }, {
        prop: 'clqtdwsl', label: '其中：处理其他单位水量(万立方米)', width: 250, isShow: true
      }, {
        prop: 'fszpfks', label: '废水总排放口数(个)', width: 220, isShow: true
      }, {
        prop: 'fspflqchj', label: '废水排放量-全厂合计(万立方米)', width: 220, isShow: true
      }, {
        prop: 'hxxylcslqchj', label: '化学需氧量产生量-全厂合计(吨)', width: 220, isShow: true
      }, {
        prop: 'hxxylpflqchj', label: '化学需氧量排放量-全厂合计(吨)', width: 220, isShow: true
      }, {
        prop: 'adcslqchj', label: '氨氮产生量-全厂合计(吨)', width: 220, isShow: true
      }, {
        prop: 'adpflqchj', label: '氨氮排放量-全厂合计(吨)', width: 220, isShow: true
      }, {
        prop: 'zdcslqchj', label: '总氮产生量-全厂合计(吨)', width: 220, isShow: true
      }, {
        prop: 'zdpflqchj', label: '总氮排放量-全厂合计(吨)', width: 220, isShow: true
      }, {
        prop: 'zlcslqchj', label: '总磷产生量-全厂合计(吨)', width: 220, isShow: true
      }, {
        prop: 'zlpflqchj', label: '总磷排放量-全厂合计(吨)', width: 220, isShow: true
      }, {
        prop: 'sylcslqchj', label: '石油类产生量-全厂合计(吨)', width: 220, isShow: true
      }, {
        prop: 'sylpflqchj', label: '石油类排放量-全厂合计(吨)', width: 220, isShow: true
      }],
      dialogTableVisible: false,
      qsltj:0,
      clsltj:0,
      pfsltj:0
    }
  },
  methods: {
    async getList() {
      const { data: result1 } = await this.$http.post('/v1.0/resultIntegration/rule/gyqyfszlyupfqkb/findPages', {
        ss: this.value,
        hydlmc: this.value2,
        hylbmc: this.value3,
        hylbmc2: '',
        pageNumber: 1,
        pageSize: 99999
      })
      if (result1.status == 3000) {
        this.tableData = result1.data.result;
        this.qsltj=0;
    this.clsltj=0;
    this.pfsltj=0;
    for (let i in  this.tableData) {
        this.qsltj+=Number(this.tableData[i].qsl)
        this.clsltj+=Number(this.tableData[i].nsjclsl)
        this.pfsltj+=Number(this.tableData[i].fspflqchj)
    }
    this.qsltj=Number(this.qsltj.toFixed(4))
    this.clsltj=Number(this.clsltj.toFixed(4))
    this.pfsltj=Number(this.pfsltj.toFixed(4))
      } else {
        this.$message.error(result1.message)
        this.tableData = []
      }

    },
    changeshi(e) {
      this.getList()
    },
    showColumn(co) {
      return this.datacolums.find(item => item.prop == co).isShow
    },
    changeCol(val) {
      this.datacolums.forEach(item => {
        item.isShow = false
      })
      val?.forEach(item => {
        let curr = this.datacolums.find(i => i.label == item)
        curr.isShow = true
      })
      this.refeshtable()
    },
    refeshtable() {
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    feishuitongji() {
      this.dialogTableVisible = true
    },
    open() {
      this.$nextTick(() => {
        this.getEachrts()
      })
},
    getEachrts() {
      myChart = echarts.init(document.getElementById('feishui'));
      var option = {
        legend: {
          textStyle: { //图例文字的样式
            color: '#000',
            fontSize: 16
          },

        },
        grid: {
          top: '9%',
          left: '9%',
          right: '0%',
          bottom: '15%',
        },
        tooltip: {
          trigger: 'item'
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#000'
            }
          },
          splitLine: {
            show: false
          }
        },
        xAxis: {
          type: 'category',
          data: ['取水量','年实际处理水量','废水排放量'],
          axisLine: {
            lineStyle: {
              color: '#000'
            }
          },
          axisLabel: {
            fontSize: '16px',
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 25,
            data: [this.qsltj,this.clsltj,this.pfsltj],
            label: {
              show: true,
              position: 'top', // 在上方显示
              verticalAlign: 'middle',
              distance: 10,
              textStyle: { // 数值样式
                color: '#000',
                fontSize: 16
              }
            },
          },
        ]
      }
      myChart.setOption(option);
      myChart.resize();
    }

  },
  mounted() {
  },
  async created() {
    if(window.sessionStorage.getItem('shiName')=='新疆生产建设兵团'){
      
    }else{
      this.value=window.sessionStorage.getItem('shiName')
      this.options=[{
        value:window.sessionStorage.getItem('shiName'),
        label:window.sessionStorage.getItem('shiName')
      }]
    }
    const { data: result1 } = await this.$http.post('/v1.0/resultIntegration/rule/gyqyfszlyupfqkb/findPages', {
      ss: this.value,
      hydlmc: this.value2,
      hylbmc: this.value3,
      hylbmc2: '',
      pageNumber: 1,
      pageSize: 99999
    })
    this.tableData = result1.data.result;
    this.qsltj=0;
    this.clsltj=0;
    this.pfsltj=0;
    for (let i in  this.tableData) {
        this.qsltj+=Number(this.tableData[i].qsl)
        this.clsltj+=Number(this.tableData[i].nsjclsl)
        this.pfsltj+=Number(this.tableData[i].fspflqchj)
    }
    this.qsltj=Number(this.qsltj.toFixed(4))
    this.clsltj=Number(this.clsltj.toFixed(4))
    this.pfsltj=Number(this.pfsltj.toFixed(4))
    let data2 = [], data3 = []
    for (let i in result1.data.result) {
      data2.push(result1.data.result[i].hydlmc)
      data3.push(result1.data.result[i].hylbmc)
    }
    data2 = Array.from(new Set(data2))
    data3 = Array.from(new Set(data3))
    for (let j in data2) {
      this.options2.push({
        label: data2[j],
        value: data2[j]
      })
      this.options3.push({
        label: data3[j],
        value: data3[j]
      })
    }
  }
}
</script>

<style scoped lang="less">
.selectDiv {
  position: absolute;
  left: 20px;
  top: 85px;
  z-index: 09999;
  display: flex;
}

.selectDiv2 {
  position: absolute;
  right: 20px;
  top: 85px;
  z-index: 09999;
}

.shishiselect {
  width: 200px;
  margin-left: 10px;

}

/deep/ .el-table__body-wrapper {
  overflow-y: auto;
  max-height: 75vh;
}
</style>
